<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="public/css/bootstrap.css">
    <script src="public/js/bootstrap.js" type="text/javascript"></script>
    <script src="public/js/jquery.min.js" type="text/javascript"></script>
    <title>bootstrap中form表单的练习</title>
</head>
<body style="padding-top:20px;">
    <div class="container">
        <div class="alert alert-danger alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <strong>Warning!</strong> 隔壁老王在摇一摇，请看好自己的老婆。<a href="http://www.itsource.cn/" target="_blank">www.itsource.cn</a>
        </div>
    </div>
    <div class="container">
        <form action="post">
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
                    <input type="text" name="username" class="form-control" id="username" placeholder="请输入用户名" />  
                </div>
            </div>

            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
                    <input type="text" class="form-control" id="password" placeholder="请输入密码">
                </div>
            </div>

            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon"></div>
                    <input type="color" class="form-control" placeholder="点击选择颜色">
                </div>
            </div>

            <div class="form-group">
                <textarea class="form-control" name="content" id="content" rows="10" placeholder="说点什么呗 ......" style="resize:none;"></textarea>
            </div>

            <div class="form-group disabled">
                <label><input type="checkbox" class="" name="t1"> 篮球</label>
                <label><input type="checkbox" class="" name="t2"> 乒乓球</label>
                <label><input type="checkbox" class="" name="t3"> 足球</label>
                <label><input type="checkbox" disabled="" name="t4"> 羽毛球</label>
            </div>
            
            <div class="radio">
                <label><input type="radio" name="t1" /> 男</label>
                <label><input type="radio" name="t1" /> 女</label>
                <label class="disabled"><input type="radio" disabled="" name="t1" /> 保密</label>
            </div>
            <input class="btn btn-primary" type="submit" value="登录" />
        </form>
    </div>
</body>
</html>